<!-- PhotoWall.vue -->
<template>
  <div ref="canvasContainer" class="canvas-container"></div>
  <!-- <div v-for="(item, index) in imgList" :key="index">
    <img :src="'data:image/png;base64,' + item.img" alt="" />
  </div> -->
</template>

<script>
import * as THREE from 'three';
// import { TextureLoader } from 'three';
import { getImage } from '@/api/content.js'
export default {
  data () {
    return {
      imgList: [] // 图片列表
    }
  },
  mounted () {

    this.getImg()
  },

  methods: {

    getImg () {
      const userId = sessionStorage.getItem('userId')
      getImage({
        userId: userId
      }).then(res => {
        if (res.success) {
          this.imgList = res.data
          this.createPhotoWall();
        }
      })
    },
    createPhotoWall () {
      // 获取容器元素
      const container = this.$refs.canvasContainer;

      // 创建场景
      const scene = new THREE.Scene();

      // 创建相机
      const camera = new THREE.PerspectiveCamera(
        75,
        container.clientWidth / container.clientHeight,
        0.1,
        1000
      );
      camera.position.z = 5;

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(renderer.domElement);

      // 创建图片纹理数组
      const textures = []
      this.imgList.map((item) => {
        return 'data:image/png;base64,' + item.img
      });

      // 创建平面几何体和材质
      textures.forEach((texturePath, index) => {
        const geometry = new THREE.PlaneGeometry(1, 1);
        const texture = new THREE.TextureLoader().load(texturePath);
        const material = new THREE.MeshBasicMaterial({ map: texture });
        const plane = new THREE.Mesh(geometry, material);

        // 根据需要排列图片
        plane.position.x = (index - textures.length / 2) * 1.5;

        scene.add(plane);
      });

      // 创建动画函数
      const animate = () => {
        requestAnimationFrame(animate);

        // 旋转图片墙
        scene.rotation.y += 0.005;

        renderer.render(scene, camera);
      };

      // 启动动画
      animate();
    }
  },

};
</script>

<style scoped>
/* 在这里添加样式 */
.canvas-container {
  width: 100%;
  height: 100%;
}
</style>
